 <template>
  <section class="modlude">
      <el-form :inline="true" :model="formSearch" class="form_inline">
          <!-- <el-form-item label="所属组织" size="small">
          <el-cascader
              ref="cascader"
              v-model="option1"
              :options="dataTree"
              :props="defaultProps2"
              @change="handleChange"
              clearable
            >
            </el-cascader>
        </el-form-item> -->
          <el-form-item label="所属项目" size="small">
              <el-select v-model="formSearch.projectId" placeholder="请选择项目">
                  <el-option v-for="(item,index) in xqTree" :label="item.name" :value="item.id" :key="index">
                  </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="名称" size="small">
              <el-input v-model="formSearch.name" placeholder="请输入计划名称"></el-input>
          </el-form-item>
          <!-- <el-form-item label="状态" size="small">
        <el-select v-model="formSearch.status" placeholder="请选择目前状态">
          <el-option label="全部" :value="''"></el-option>
          <el-option label="已启用" :value="1"></el-option>
          <el-option label="已停用" :value="2"></el-option>
        </el-select>
      </el-form-item> -->
      <!-- v-if="$root.btnControl.find(item=>item=='view')" -->
          <el-form-item size="small"> 
              <el-button   @click="getlist">查 询
              </el-button>
          </el-form-item>

          <!-- <el-form-item>
              <el-button size="small" @click="addDialog = true">新增巡查计划</el-button>
          </el-form-item> -->
          <!-- <el-form-item>
              <el-button size="small" @click="gopatrol_configuration">去配置</el-button>
          </el-form-item> -->

      </el-form>
      <el-table :data="formData" style="width: 100%"> 
          <el-table-column prop="xqName" label="所属项目"></el-table-column>
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="path" label="巡查路线"></el-table-column>
          <el-table-column prop="dotNum" label="巡查点数量"></el-table-column>
          
          <el-table-column prop="yunweirenyuan" label="巡查人员"></el-table-column>
          <!-- <el-table-column prop="name" label="巡查日期"></el-table-column> -->
          <el-table-column label="巡查执行时间" width=300>
              <template slot-scope="scope">
                  {{scope.row.stime !=''?scope.row.stime:''}}
                  -
                  {{scope.row.etime !=''?scope.row.etime:''}}
              </template>
          </el-table-column>
          <el-table-column label="是否超时">
              <template slot-scope="scope">
                  {{scope.row.timeout ==1?'是':'否'}}
              </template>
          </el-table-column>
          <el-table-column label="完成时间">
              <template slot-scope="scope">
                  {{scope.row.finishTime !=''?scope.row.finishTime:''}}
              </template>
          </el-table-column>
          <el-table-column label="状态">
              <template slot-scope="scope">
                  {{scope.row.state ==0?'申请成功':scope.row.state ==1?'己派单':scope.row.state
                  ==2?'已接单':scope.row.state==3?'待派单':scope.row.state==4?'已完成':scope.row.state==5?'审核不通过':'审核通过'}}
              </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width=250>
              <template slot-scope="scope">
                  <!-- v-if="$root.btnControl.find(item=>item=='designate')" -->
                <el-button type="" size="small"
                
                @click="paidan(scope.row.projectId,scope.row.id,1)">指派人员</el-button>
                <!-- && $root.btnControl.find(item=>item=='dispatch') -->
                  <el-button type="" size="small"
                      v-if=" scope.row.state==0 "
                      @click="paidan(scope.row.projectId,scope.row.id,2)">派单</el-button>
                      <!-- && $root.btnControl.find(item=>item=='check') -->
                  <el-button type="" size="small"
                      v-if=" scope.row.state==4 "
                      @click="shenghe(scope.row.id)">审核
                  </el-button>
                  <!-- <el-button type="" size="small" v-if="scope.row.enabled == 0" @click="">启用</el-button> -->
                  <!-- v-if="$root.btnControl.find(item=>item=='view')" -->
                  <el-button type="" size="small" 
                      @click="ywxiangqing(scope.row)">详情</el-button>
                      <!-- v-if="$root.btnControl.find(item=>item=='delete')" -->
                  <el-button type="" size="small" 
                      @click="deleinfor(scope.row.id)">删除</el-button>
              </template>
          </el-table-column>
      </el-table>
      <paging @changePage=handleCurrentPage :get-total='total'></paging>
      

      <el-dialog title="巡查详情" top="6vh" :visible.sync="ywxqDialog" @close="canceladd" :close-on-click-modal="false">
          <el-form :inline="true" :model="formSearch" class="form_inline">

              <!-- <el-form-item label="设备名称" size="small">
                  <el-input v-model="formSearch.name" placeholder="设备名称"></el-input>
              </el-form-item>
              <el-form-item>
                  <el-button size="small" @click="ywgetsblist">查 询</el-button>
              </el-form-item> -->
          </el-form>
          <el-table :data="ywsbformData" style="width: 100%" height='300px'>
              <el-table-column prop="name" label="巡查点"></el-table-column>
              <el-table-column prop="time" label="完成时间"></el-table-column>
              <el-table-column prop="abnormal" label="是否异常">
                  <template slot-scope="scope">
                      {{scope.row.abnormal==1?"是":scope.row.abnormal==0?"否":'--'}}
                  </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right" width="270">
                  <template slot-scope="scope">
                      <!-- <el-button type="" size="small" @click="">处理</el-button>
                      <el-button type="" size="small" @click="">处理进度</el-button> -->
                      <el-button type="" size="small" @click="ywqkbd(scope.row)">巡查情况表单</el-button>
                  </template>
              </el-table-column>
          </el-table>

          <el-divider content-position="left"></el-divider>
          <div>
              <span style="font-size: 16px;">任务详情</span>
              <div style="margin: 20px 20px;">
                  <div>
                      <span> 所属项目：</span><span>{{xiangqingform.xqName}}</span>
                  </div>
                  <div>
                      <span> 所属有巡查计划：</span><span>{{xiangqingform.name}}</span>
                  </div>
                  <div>
                      <span> 所属巡查路线：</span><span>{{xiangqingform.path}}</span>
                  </div>
                  <div>
                      <span> 巡查点数量：</span><span>{{xiangqingform.dotNum}}</span>
                     </div>
                  <div>
                      <span> 巡查时间段：</span><span>{{xiangqingform.stime}} - {{xiangqingform.stime}}</span>
                  </div>
                  <div>
                      <span> 完成时间：</span><span>{{xiangqingform.finishTime}}</span>
                  </div>
                  <div>
                      <span> 巡查人员：</span><span>{{xiangqingform.ywrydata}}</span>
                  </div>

              </div>
          </div>
      </el-dialog>
      <el-dialog title="派单" width="30%" :visible.sync="paidanDialog" @close="canceladd" :close-on-click-modal="false">

          <el-form :inline="true" :model="pandandata" class="form_inline">
              <el-form-item label="巡查人员" :rules="{
                  required: true, message: '此项不能为空', trigger: 'blur'
              }">
                  <el-select v-model="paidanry" size="small" multiple placeholder="请选择">
                      <el-option v-for="item in ywrydata" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                  </el-select>
              </el-form-item>

          </el-form>
          <div class="dialog-footer" style="text-align: center;">
              <!-- <el-button size="medium " @click="canceladd">取 消</el-button> -->
              <el-button size="medium " @click="paidango(2)">派 单</el-button>
          </div>
      </el-dialog>
      <el-dialog title="指派巡查人员" width="30%" :visible.sync="xiugaiDialog" @close="canceladd" :close-on-click-modal="false">

        <el-form :inline="true" :model="pandandata" class="form_inline">
            <el-form-item label="巡查人员" :rules="{
                required: true, message: '此项不能为空', trigger: 'blur'
            }">
                <el-select v-model="paidanry" size="small" multiple placeholder="请选择">
                    <el-option v-for="item in ywrydata" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

        </el-form>
        <div class="dialog-footer" style="text-align: center;">
            <!-- <el-button size="medium " @click="canceladd">取 消</el-button> -->
            <el-button size="medium " @click="paidango(1)">提 交</el-button>
        </div>
    </el-dialog>

      <el-dialog title="设备巡查情况" top="6vh" :visible.sync="ywqkbdDialog" @close="canceladd"
          :close-on-click-modal="false">
          <div>
              <span>巡查点：</span><span>{{sbqkdata.name}}</span> <span style="margin-left: 10px;">完成时间：</span>
              <span>{{sbqkdata.time}}</span>
              <span
                  style="margin-left: 10px;">是否异常：</span><span>{{sbqkdata.abnormal==1?"异常":sbqkdata.abnormal==0?"正常":'--'}}</span>
          </div>

          <el-divider content-position="left"></el-divider>
          <div style="display: flex;">
              <div style="width: 400px; ">
                  <div style="display: inline;" v-for="(item,index) in sbqkdata.wbjcx" :key="index">
                      <span style="font-size: 16px;">维保检查项：</span>
                      <div style="margin-left: 50px;">
                          <div>{{item.name}}</div>
                          <div style="margin-left: 20px;" v-for="(val,index1) in sbqkdata.wbjcx[index].patrolExamineSeedList"
                              :key="index1">
                              <div>
                                  {{val.name}} <span
                       style="margin-left: 10px;">是否选择：</span><span>{{val.choice==1?"是":val.choice==0?"否":'--'}}</span>
                              </div>
                              </div>
                          </div>
                          <!-- <div>外观是否完整</div> -->
                      </div>
                        <div>订单描述：{{sbqkdata.desc}}</div>
                  </div>
              </div>
              
              <div >
                  <div>维保图片：</div>
                  <div style="width: 300px;display:inline;" v-for="iem in sbqkdata.img">
                      <img :src="iem" style="margin: 10px 10px 0px 0px;" width="150" height="150" alt="">
                  </div>
              </div>
          </div>
      </el-dialog>

      <el-dialog title="审核" width="30%" :visible.sync="shengheDialog" @close="canceladd"
          :close-on-click-modal="false">
          <div class="dialog-footer" style="text-align: center;">
              <!-- <el-button size="medium " @click="canceladd">取 消</el-button> -->
              <el-button size="medium " @click="shengheyesorno(1)">审核通过</el-button>
              <el-button size="medium " @click="shengheyesorno(0)">审核不通过</el-button>
          </div>
      </el-dialog>

  </section>
</template>

<script>
  import paging from "../paging"
   import { getDateArray } from '../../util/util'
  import {
       checkPatrolTask,
       deleteTaskList,
       sendTask,
       updTaskListAll,
      patrolTaskListAll,
      xqSelectList,
       orgTree,
       getInvestigatorsList,
  } from '../../url/api';
  export default {
      data() {
          return {
              xiugaiDialog:false,
              zdsjd: [],
              zxsjd: '',//执行时间段
              inspectEndTime1: '',
              inspectEndTime3: '',
              meiyuexh: '',//每月循环
              checkboxGroup1: [],//每周循环
              jgxhvalue: '',//间隔循环
              dayTree: [],
              ywrydata: [],
              value2: [],
              value3: '',
              dynamicTags: [],//tag
              checkStrictly: false,
              ywxqDialog: false,
              paidanDialog: false,
              ywqkbdDialog: false,
              shengheDialog: false,
              shengheIds: '',
              ywsbformData: [],
              xiangqingform: {

              },
              sbqkdata: {
                  wbjcx: [
                      // {
                      //     id: 1,
                      //     name: '设备线路检查',
                      //     seeds: [
                      //         {
                      //             name: '线路是否老化',
                      //         },
                      //         {
                      //             name: '散热是否正常',
                      //         },
                      //         {
                      //             name: '报警是否正常'
                      //         }
                      //     ]

                      // },
                      // {
                      //     id: 2,
                      //     name: '设备报警检查',
                      //     seeds: [
                      //         {
                      //             name: '报警内容知否正常',
                      //         }, {
                      //             name: '报警时间是否正常',
                      //         }, {
                      //             name: '报警声音是否正常'
                      //         }
                      //     ]
                      // },
                      // {
                      //     id: 3,
                      //     name: '网络是否正常',
                      //     seeds: [
                      //         {
                      //             name: '网络内容知否正常',
                      //         }
                      //         , {
                      //             name: '网络时间是否正常',
                      //         }
                      //         , {
                      //             name: '网络声音是否正常'
                      //         }
                      //     ]
                      // },
                  ],
                  img: [
                      // 'http://www.ubicell.cn/intellmanager/real/2faa7845f1ae4688b2003edde3f71130.jpg',
                      // 'http://www.ubicell.cn/intellmanager/real/2faa7845f1ae4688b2003edde3f71130.jpg',
                      // 'http://www.ubicell.cn/intellmanager/real/2faa7845f1ae4688b2003edde3f71130.jpg',
                  ]
              },
              pandandata: {},
              paidanry: [],
              bindRole: {},
              showmenuList: [],
              menuList: [],
              option1: [],
              xqTree: [],
              isAddorUpdate: 1,//1添加、2修改
              formSearch: {
                  current: 1,
                  size: 10,
                  type:1,
                  projectId:'',
              },
              paidanId: '',
              pro_type: 1,//1.报修类型2.物业缴费类型3.家庭事务类型
              formData: [],//数据
              // deleBatch: [],//删除数据
              // formUpdate:{},//修改表单
              total: 0,//数据总数
              pages: 0,//页面总数
              total2: 0,
              addDialog: false,
              // updateDialog:false,
              // dialog:false,
              formPush: {
                  inspectType: 1,
                  frequencyType: 1,
                  enabled: 0,
                  patrolTimeDTOS: [
                      {
                          executionStartTime: '',
                          executionEndTime: ''
                      }
                  ]
              },
              cities: [
                  { name: '周一', day: 1 }, { name: '周二', day: 2 }, { name: '周三', day: 3 },
                  { name: '周四', day: 4 }, { name: '周五', day: 5 }, { name: '周六', day: 6 }, { name: '周日', day: 7 }],
              dataTree: [],
              // defaultProps: {//树状图key定义
              //   children: 'data',
              //   label: 'name'
              // },
              defaultProps2: {
                  children: 'children',
                  label: 'name',
                  value: 'id',
                  expandTrigger: 'hover', checkStrictly: true
              },
              // rules: {
              //   name: [{ required: true, message: '该项不能为空', trigger: 'change' }],
              //   phone: [{ required: true, message: '该项不能为空', trigger: 'change' }],
              //   identity: [{ required: true, message: '该项不能为空', trigger: 'change' }],
              //   department: [{ required: true, message: '该项不能为空', trigger: 'change' }],
              //   sex: [{ required: true, message: '该项不能为空', trigger: 'change' }],
              //   idNumberType: [{ required: true, message: '该项不能为空', trigger: 'change' }],
              //   projectId: [{ required: true, message: '该项不能为空', trigger: 'change' }],
              // },
              imageUrl: ''
          }
      },
      methods: {

          shenghe(id) {
              this.shengheDialog = true
              if (id) {
                  this.shengheIds = id
              }
          },
          shengheyesorno(status) {
              let params = {
                  id: this.shengheIds,
                  status: status,
              }
              //console.log(params);  
              checkPatrolTask(params).then((res) => {
                  ////console.log("派单", res)
                  if (res.data.ok) {
                      this.$message({
                          message: '审核成功',
                          type: 'success'
                      });
                      this.getlist()
                      this.shengheIds = ''
                      this.shengheDialog = false
                  } else {
                      this.$message('审核失败')
                  }
              })
              this.paidanDialog = false

          },

          ywqkbd(row) {
              console.log(row);
              this.sbqkdata.name = row.name
              this.sbqkdata.abnormal = row.abnormal
              this.sbqkdata.time = row.time
              this.sbqkdata.desc = row.desc
              console.log(this.sbqkdata);
              this.sbqkdata.img[0] = row.picture
              if (row.patrolContentDTOS) {
                  this.sbqkdata.wbjcx = row.patrolContentDTOS
                  //console.log("aaa");
              }

              this.ywqkbdDialog = true
          },

          ywxiangqing(row) {
              this.ywxqDialog = true
              this.xiangqingform = row
              this.ywsbformData = row.dotName.filter((item) => {
                  if (item.time) {
                      item.time = getDateArray(item.time)[9]
                  }
                  return item
              })
          },
          paidango(index) {
              ////console.log(this.paidanry);
              if (this.paidanry.length == 0) {
                  this.$message("请选择巡查人员")
                  return
              } else {
                  let params = {
                      id: this.paidanId,
                      xcId: this.paidanry
                  }
                  let zpparams = {
                      id: this.paidanId,
                      //inspectorsName: this.paidanry
                  }
                  zpparams.inspectorsName = []
                  this.paidanry.forEach(val=>{
                    let PersonVO = {
                      id:val
                    }
                    zpparams.inspectorsName.push(PersonVO)
                  })
                  
                   console.log(zpparams);
                  this.$confirm("确定要执行此操作吗？", '提示', {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning'
                  }).then(() => {
                      if(index == 2){
                        sendTask(params).then((res) => {
                          //console.log("派单", res)
                          if (res.data.ok) {
                              this.$message({
                                  message: '操作成功',
                                  type: 'success'
                              });
                              this.getlist()
                              this.paidanry = []
                              this.paidanId = []
                              this.paidanDialog = false
                          } else {
                              this.$message('操作失败')
                          }
                      })
                      this.paidanDialog = false
                      }else if(index == 1){
                        updTaskListAll(zpparams).then((res) => {
                          if (res.data.ok) {
                              this.$message({
                                  message: '操作成功',
                                  type: 'success'
                              });
                              this.getlist()
                              this.paidanry = []
                              this.paidanId = []
                              this.paidanDialog = false
                          } else {
                              this.$message('操作失败')
                          }
                      })
                      this.xiugaiDialog = false
                      }
                   

                  }).catch(_ => { });

              }
          },
          // ywgetsblist(){

          // },
          paidan(xqid, id,index) {
              let params = {
                  projectId: xqid,
                  roleType:1
              }
              this.paidanId = id
              getInvestigatorsList(params).then((res) => {//巡查人员列表
                  //console.log("巡查人员列表:", res)
                  if (res.data.ok) {
                      this.ywrydata = res.data.data.records.filter((item) => {
                          return item
                      })
                  } else {
                      this.$message(res.data.msg);
                  }
              })
              if(index == 1){
                this.xiugaiDialog = true
              }else if(index == 2){
                this.paidanDialog = true
              }
             

          },

          deleinfor(id) {
              let params = [
                  id
              ]

              this.$confirm("确定要删除吗？", '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
              }).then(() => {
                deleteTaskList(params).then((res) => {
                      //console.log("删除", res)
                      if (res.data.ok) {
                          this.$message({
                              message: '删除成功',
                              type: 'success'
                          });
                          this.getlist()
                      } else {
                          this.$message('删除失败')
                      }
                  })

              }).catch(_ => { });

          },


          addlist() {

          },

          inspectType(data) {
              if (data == 1) {
                  this.zdsjd = []
                  this.inspectEndTime3 = ''
              } else if (data == 2) {
                  this.inspectEndTime1 = ''
                  this.inspectEndTime3 = ''
                  //console.log(this.zdsjd[0]);
              } else if (data == 3) {
                  this.inspectEndTime1 = ''
                  this.zdsjd = []
              }



              //console.log(data);

          },

          frequencyType(data) {
              // this.formPush.frequencyDay = ''
              if (data == 1) {
                  // meiyuexh = ''
                  this.checkboxGroup1 = []
                  this.jgxhvalue = ''

              } else if (data == 2) {
                  this.meiyuexh = ''
                  //checkboxGroup1 = []
                  this.jgxhvalue = ''
                  //this.formPush.frequencyDay = this.checkboxGroup1.join('_')
                  //console.log(this.formPush.frequencyDay);
              } else if (data == 3) {
                  this.meiyuexh = ''
                  this.checkboxGroup1 = []
                  //jgxhvalue = ''

              }
              //console.log(data);
              //console.log(this.zdsjd);


          },

          gopatrol_configuration() {
              this.$router.push({
                  path: '/patrol_configuration',
                  //     query:{
                  //     type:0
                  // }
              })
          },
          canceladd() {

          },
          qqwwee(event) {
              //console.log("aaaaaaaaaaaaas", event);
              let aa = event;
              let ss = aa[0].getTime();
              //console.log(ss);

          },
          //---------tag 标签------
          handleClose(tag) {
              for (var i = 0; i < this.dynamicTags.length; i++) {
                  if (tag.id === this.dynamicTags[i].id) {//以id作为key进行比对
                      this.dynamicTags.splice(i, 1);//删除对应id的tag
                      this.$refs.multipleTable2.toggleRowSelection(tag, false);//同时取消表格中对应行的勾选状态
                  }
              }
              // this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
          },



          getlist() {
            patrolTaskListAll(this.formSearch).then((res) => {
                  console.log("巡查任务列表", res)
                  if (res.data.ok) {
                      this.formData = res.data.data.records.filter((item) => {
                          if (item.patrolTimes && item.patrolTimes.length >0) {
                              item.stime = getDateArray(item.patrolTimes[0].executionStartTime)[9]
                              item.etime = getDateArray(item.patrolTimes[0].executionEndTime)[9]
                             // item.timeout = item.patrolTimeDTOS[0].timeout
                          }
                          if (item.finishTime) {
                              item.finishTime = getDateArray(item.finishTime)[9]
                          }
                          if (item.inspectorsName) {
                              let ryarry = []

                              item.inspectorsName.forEach(val => {
                                  ryarry.push(val.name)
                                  item.ryids = val.id
                              })
                              if (ryarry.length > 2) {
                                  item.ywrydata = ryarry.join('、')
                                  item.yunweirenyuan = ryarry[0] + '、' + ryarry[1] + ' . . .'

                              } else {
                                  item.yunweirenyuan = ryarry.join('、')
                                  item.ywrydata = ryarry.join('、')
                              }

                              //item.yunweirenyuan = item.inspectorsName.name.join(',')
                          }
                          return item
                      })
                      this.total = res.data.data.total
                  } else {
                      this.$message(res.data.msg);
                  }
              })
          },
          getInit() {
              xqSelectList({}).then((res) => {//项目选择列表
                  //console.log(res)
                  if (res.data.ok) {
                      this.xqTree = res.data.data;
                      this.formSearch.projectId =  res.data.data.id;
                  }
                  this.getlist()
              })
              let org_tree = {
                  name: '',
                  status: 1
              }
              orgTree(org_tree).then((res) => {//获取组织列表
                  //console.log(res)
                  if (res.data.ok) {
                      this.dataTree = res.data.data
                  }
              })


              getInvestigatorsList({}).then((res) => {//巡查人员列表
                  //console.log("巡查人员列表:", res)
                  if (res.data.ok) {
                      this.ywrydata = res.data.data.records.filter((item) => {
                          return item
                      })
                  } else {
                      this.$message(res.data.msg);
                  }
              })


              //---天
              for (var count3 = 1; count3 <= 31; count3++) {
                  let numberdata = {};
                  numberdata.name = count3
                  this.dayTree.push(numberdata)
              };


          },

          handleCurrentPage(val) {//页码改变
              this.formSearch.current = val
              this.getlist()
          },
      },
      mounted() {
          this.getInit();
        //   this.getlist()
      },
      components: {
          paging
      }
  }
</script>
<style scoped>
  .radiodiv {
      margin-bottom: 20px;
  }

  .asdf .el-input__inner {
      width: 232px;
      max-width: 240px;
      color: #fff;
  }

  .el-date-editor .el-range-input {
      color: #fff;
  }

  .el-date-editor .el-range-separator {
      color: #fff;
  }

  .radiodiv>>>.asdf {
      width: 260px;
      max-width: 260px;
  }

  .radiodiv>>>.el-range-separator {
      color: #fff;
  }

  .radiodiv>>>.el-range-input {
      color: #fff;
  }

  .radiodiv>>>.selectdiv input {
      width: 60px;
      min-width: 60px;
      margin-left: 10px;
  }

  .jgxhtime>>>.el-input__inner {
      width: 100px;
      max-width: 100px;
      min-width: 100px;
  }

  .myxhnumber>>>.el-input__inner {
      width: 50px;
      min-width: 50px;
      max-width: 50px;
  }

  .radiodiv>>>.el-checkbox-button {
      margin-right: 10px;
      border-radius: 5px;
  }

  .radiodiv>>>.el-checkbox-button__inner {
      border-radius: 5px;
  }
</style> -->